<!-- 提现记录   （已修改接口，需测试） -->
<template>
	<view class="">
		<view class="bg" :style="{ '--bg-image': `url(${ withdrawalBg})` }" >
			<view class="flex-between" style="height: 100%;">
				<view style="width: 100%;">
					<view class="flex-between padding-bottom_10rpx "  style="border-bottom: 2rpx solid rgba(255, 255, 255, 0.14);">
						<view class="flex-columns">
							<view class="font-size_30rpx margin-bottom_10rpx" style="color: #fff;">
								可提现佣金
							</view>
							<view class="margin-bottom_30rpx font-weight_bold" style="color: #fff;font-size: 50rpx"
								v-if="commissionStatisObj">
								{{commissionStatisObj.brokerage?commissionStatisObj.brokerage:'0.00'}}
							</view>
						</view>
						<view class="withdrawalBtn flex" @click="goWithdrawal()">
							去提现
						</view>
					</view>
		
					<view class="detailsContainer flex-between  margin-top_20rpx">
					
						<block v-for="(i, j) in commissionStatList" :key="j">
							<view class="flex-column v-price" @click="toGo(i.url)">
								<view style="color: #ffffff;font-weight: 700;">{{ i.num }}</view>
								<text
									style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71); margin-top: 10rpx;">{{ i.title }}</text>
							</view>
					
						</block>
					
					</view>
		
				</view>
				<view class=" flex">
		
				</view>
			</view>
			
		</view>
		<!-- <view class="bg" :style="{ '--bg-image': `url(${ withdrawalBg})` }">
			<view class="flex-between" style="height: 100%;">
				<view style="max-width: 300rpx;">
					<view class="font-size_30rpx margin-bottom_30rpx" style="color: #fff;">
						未提现佣金
					</view>
					<view class="margin-bottom_30rpx font-weight_bold" style="color: #fff;font-size: 50rpx"
						v-if="commissionStatisObj">
						{{commissionStatisObj.all?commissionStatisObj.all:'0.00'}}
					</view>
					
					<view class="detailsContainer flex-between  margin-top_20rpx">
					
						<block v-for="(i, j) in commissionStatList" :key="j">
							<view class="flex-column v-price" @click="toGo(i.url)">
								<view style="color: #ffffff;">{{ i.num }}</view>
								<text
									style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71);">{{ i.title }}</text>
							</view>
					
						</block>
					
					</view>
					
				</view>
				<view class="withdrawalBtn flex" @click="goWithdrawal()">
					去提现
				</view>
			</view>
			
		</view> -->
		<view class="display-a margin-top_50rpx margin-left_16rpx">
			<view class="label" @click="getLabel(0)" :style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				全部</view>
			<view class="label" @click="getLabel(1)" :style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				申请中</view>

			<view class="label" @click="getLabel(2)" :style="selLabel == 2? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				已完成</view>
			<view class="label" @click="getLabel(3)" :style="selLabel == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				已驳回</view>




		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="withdrawalList" v-for="(item,index) in list" :key="index">
				<view class="padding-bottom_20rpx flex-between border-bottom-f7f7f7">
					<view class=" flex-columns">
						<view class="flex" style="font-size: 22rpx;">
							<view>
								<image v-if="item.cash_type==2" class="imgIcon margin-top_10rpx" :src="wxOne"
									mode=""></image>
								<image v-if="item.cash_type==1" class="imgIcon margin-top_10rpx" :src="zfb"
									mode=""></image>
							</view>
							<view class="flex-columns">
								<view class=" flex-start-center">
									<view class=" font-weight_bold" style="font-size: 28rpx;">
										提现到{{item.cash_type==1?'支付宝':'微信'}}
									</view>
									<view class="green flex font-size_22rpx" v-if="item.is_status==1">
										申请中
									</view>
									<view class="red flex font-size_22rpx" v-if="item.is_status==2">
										已完成
									</view>
									<view class="blue flex font-size_22rpx" v-if="item.is_status==3">
										已驳回
									</view>

								</view>
								<view class="margin-top_16rpx" style="color: #757575;font-size: 24rpx;">
									{{item.create_time}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex-column-end">
						<view class="font-weight_bold" style="color: #31A952;font-size: 30rpx;">
							{{item.commission_wait}}
						</view>
						<view class="margin-top_16rpx" style="color: #757575;font-size: 24rpx;">
							手续费{{item.service_ratio}}%，￥{{item.commission_actual}}
						</view>
					</view>
				</view>
				<view class="margin-top_20rpx flex-column-start">
					<view class="">
						订单号：{{item.log_no}}
					</view>
					<view class="flex-start-center margin-top_20rpx" style="color: red;" v-if="item.is_status==3">
						<uni-icons type="help" size="20" color="red"></uni-icons>
						<text
							style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;">失败原因：{{item.refuse}}</text>
					</view>

				</view>
			</view>


		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				wxOne:this.$imgs.wxOne,
				zfb:this.$imgs.zfb,
				brokerageIndex: uni.getStorageSync('brokerageIndex'),
				withdrawalBg: this.$imgs.six851,
				selLabel: 0,
				commissionStatisObj: {},
				downOption: {
					auto: true
				},
				commissionStatList:[],
				// 上拉配置项
				upOption: {
					auto: true
				},
			};
		},
		computed: {
			totelName: function() {
				return function(num) {
					console.log(num);
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						if(num){
							return num.toString();
						}else{
							return 0
						}
					}
				};
			}
		},
		onLoad() {
			this.commissionStatisFn()
		},

		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.commissionLog,
					data: {
						page: scroll.num,
						uid: uni.getStorageSync('uid'),
						type: this.type,
						is_status: this.selLabel,
						psize: 10



					},


				})
				if (result.errno == 0) {
					this.count = result.total
					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},
			async commissionStatisFn() {
				const result = await this.$http.get({
					url: this.$api.commissionStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {
					this.commissionStatisObj = result.data
					
					this.commissionStatList = [
					
					
						{
							num: this.commissionStatisObj.already,
							title: '已提现佣金'
					
						},
						{
							num: this.commissionStatisObj.all,
							title: '未提现佣金'
					
						},
						{
							num: this.commissionStatisObj.freeze ,
							title: '不可提现佣金'
					
						}
					]
				}
			},
			getLabel(index) {

				this.selLabel = index;
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
			goWithdrawal() {
				this.$sun.navGo('/pages/partnerPromotion/applyWithdrawal')
			}

		}
	};
</script>

<style>
	page {}
</style>
<style lang="less" scoped>
	.withdrawalList {


		border-radius: 10rpx;

		background: rgb(255, 255, 255);
		padding: 30rpx 30rpx;
		margin: 0 30rpx;
		margin-top: 40rpx;

		.imgIcon {
			width: 75.78rpx;
			height: 75.78rpx;
			margin-right: 15rpx;
			border-radius: 50%;
		}

		.green {
			border-radius: 8rpx;
			width: 92rpx;
			height: 38rpx;
			background: rgb(0, 206, 85);
			color: #fff;
			margin-left: 15rpx;
		}

		.blue {
			border-radius: 8rpx;
			width: 92rpx;
			height: 38rpx;
			background: #F5F5F5;
			color: #999999;
			margin-left: 15rpx;
		}

		.red {
			border-radius: 8rpx;
			width: 92rpx;
			height: 38rpx;
			background: #FF2B2B;
			color: #fff;
			margin-left: 15rpx;
		}
	}

	.bg {
		background-repeat: no-repeat;
		height: 300rpx;
		border-radius: 20rpx;
		padding: 12rpx;
		background-image: (var(--bg-image));
		background-size: cover;
		margin: 30rpx;
		padding: 30rpx;

		.withdrawalBtn {
			border-radius: 200rpx;
			width: 142rpx;
			height: 68rpx;
			color: #2870FE;
			background: rgb(255, 255, 255);
		}
	}

	.label {
		background-color: #ffff;
		color: #A1A1A1; 
		border-radius: 10rpx;
		padding: 8rpx 16rpx;
		display: inline-block;
		margin-left: 20rpx;
	}
</style>